<template>
	<div>
		<div>
			<div>{{ hello }}</div>

			<a v-bind:href="url"> 对象、属性绑定</a>
			<input type="text" v-bind:value="val" />
		</div>

		<hr>
		<div>
			<h2>事件绑定、鼠标点击</h2>
			<!-- 点击事件 -->
			<button v-on:click="onClick(123)">点击事件</button>
			<button @click="onClick(123)">点击事件</button>

			<!-- 双击事件 -->
			<button @dblclick="doubleClick(222)">鼠标双击事件</button>
			<button v-on:dblclick="doubleClick(333)">鼠标双击事件</button>

			<!-- 鼠标移动事件 -->
			<div id="canvas" v-on:mousemove="createData">
				<h3>鼠标移动事件</h3>
				{{x}} {{ y }}
			</div>
		</div>

		<hr>

		<div>
			<h2>事件修饰符</h2>
			<button @click.once="add(1)">仅触发一次</button>
			<div @click="clickContainer" style="padding: 10px 0">
				<!-- 两个都输出 -->
				<button @click="clickButton">两个都输出</button>
				<!-- 只会输出当前点击 -->
				<button @click.stop="clickButton">只会输出当前点击</button>
			</div>
			<div>this value is {{ onceVal }}</div>
			<div id="canvas" v-on:mousemove="createData">
				<h3>鼠标移动事件</h3>
				{{x}} {{ y }}
				<span v-on:mousemove.stop="stopmoving">(在这里移动阻止了 createData 的数据)</span>
			</div>

			<a href="www.baidu.com" @click.prevent="alert()">有 prevent 阻止不会跳转</a>
		</div>

		<hr>

		<div>
			<h2>键盘事件及键盘修饰符</h2>
			<!-- 回车后触发方法 -->
			<input type="text" @keyup.enter="clogEnter" />

			<!-- alt+ 回车触发 -->
			<input type="text" @keyup.alt.enter="clogAltEnter" />

			<input type="text" @keydown="clogKeyDown" />
		</div>
		<hr>
		<div>
			<h2>双向数据绑定</h2>
			<!-- 使用 v-model 指令 -->
			<div>
				<input type="text" v-model="val" />
				{{ val }}
			</div>

			<!-- 使用 ref，利用 $refs 获取value值进行绑定 -->
			<div>
				<input type="text" ref="name" @keyup="clogEnter" />
				{{name}}
			</div>
		</div>
		<hr>
		<div>
			<h2>计算属性 computed</h2>
			<button @click="a++">Increase A</button>
			<button @click="b++">Increase B</button>
			<div>A-----{{a}}</div>
			<div>B-----{{b}}</div>

			<div>Computed A = {{ increaseA }}</div>
			<div>Computed B = {{ increaseB }}</div>
		</div>

		<hr>
		<div>
			<h2>动态CSS类型绑定</h2>
			<!-- 对象绑定 -->
			<div @click="isActive = !isActive" :class="{active:isActive, 'error-alert': errorClass}">是否激活</div>

			<!-- 数组绑定 -->

			<div :class="[isActive ? activeClass : '', 'error-alert']">数组绑定3</div>

			<div :style="[fontBold, fontSize]">数组绑定1</div>
			<div :style="{backgroundColor:bgColor, fontSize:fontSize1 + 'px'}">数组绑定2</div>

			<!-- 使用计算属性 -->
			<div :class="[isActive ? computedClass : '']">计算属性</div>
		</div>
		<hr>
		<div>
			<h2>传值和传引用的类型和区别</h2>

			<!-- 调用两次，查看会不会同时改变 -->
			<Lists :lists="lists"></Lists>
			<Lists :lists="lists"></Lists>

			<ChildL :tiltes="title" v-on:titleChange="ChildUpdateParent"></ChildL>

			<ChildLs :tiltes="title"></ChildLs>
		</div>
	</div>
</template>
<script>
	import ChildL from '../components/ChildL.vue'
	import ChildLs from '../components/ChildLs.vue'
	import Lists from "../components/Lists.vue"
	export default {
		components: {
			ChildL,
			ChildLs,
			Lists
		},
		data() {
			return {
				val: '请输入值',
				hello: 'Hello World.',
				url: 'www.baidu.com',
				x: 0,
				y: 0,
				onceVal: 10,
				name: '',
				a: 0,
				b: 0,
				isActive: false,
				bgColor: '#fa42e8',
				fontColor: '#ffffff',
				fontBold: {
					fontWeight: 'bold'
				},
				fontSize: {
					fontSize: '30px'
				},
				fontSize1: 35,
				errorClass: 'error-alert',
				activeClass: 'active',
				title: "传递的是一个值，(Number, String, Boolean)",
				lists: [{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					},
					{
						name: 'Coopan',
						'age': 20,
						show: false
					}
				]
			}
		},
		computed: {
			increaseA() {
				return this.a + 2
			},
			increaseB() {
				return this.b + 1
			},
			computedClass() {
				return {
					active: this.isActive,
					computedClass: this.isActive
				}
			}
		},
		methods: {
			add(val) {
				this.onceVal = this.onceVal + val
			},
			alert() {
				alert('Hello')
			},
			onClick(val) {
				console.log(val);
			},
			doubleClick(val) {
				console.log(val);
			},
			createData(event) {
				this.x = event.offsetX
				this.y = event.offsetY
			},
			stopmoving(event) {
				event.stopPropagation()
			},
			clickContainer() {
				console.log('Click Container.');
			},
			clickButton() {
				console.log('Click Button.');
			},
			clogEnter(event) {
				this.name = this.$refs.name.value
				console.log(`${event.keyCode}--${event.target.value}`);
			},
			clogAltEnter(event) {
				console.log(`${event.keyCode}--${event.target.value}`);
			},
			clogKeyDown(event) {
				console.log(event);
			},
			ChildUpdateParent(val) {
				this.title = val
			}
		},
	}
</script>

<style>
	.active {
		font-size: 1.625rem;
		font-weight: bold;
		color: #42B983;
	}

	.error-alert {
		color: darkred;
		font-weight: bolder;
	}

	.computedClass {
		padding: 15px;
		background: linear-gradient(to right, blue, pink);
	}
</style>
